<template>
  <div class="discountDetail" >
    <!-- 头部开始 -->
    <header v-if="discountData">
      <div class="photo">
        <img :src="discountData.user_info.photo_url" alt="" mode="aspectFill">
        <div>{{discountData.user_info.nickname}}发现了一样好东西，帮TA砍到最低价吧！</div>
        <img src="../../../../static/images/home.png" alt="" class="home" @click="toHome" v-if="showSharebtn==true">
      </div>
      <div class="goods">
        <div class="goods_left">
          <img :src="discountData.goods_info.thumb_url" alt="" mode="aspectFill">
        </div>
        <div class="goods_right">
          <div class="goods_right_tit">
            {{discountData.goods_info.name}}
          </div>
          <div class="goods_right_time">
            <span>距离活动结束仅限</span>
            <div>
              <span class="data"><span>{{day}}</span> <span>天</span></span>
              <span class="hour"><span>{{hour}}</span> <span>时</span></span>
              <span class="min"><span>{{min}}</span>  <span>分</span></span>
              <span class="second"><span>{{second}}</span> <span>秒</span></span>
            </div>
          </div>
          <div class="goods_right_price">
            <div class="m_price">原价￥{{discountData.goods_info.goods_spu_info.price}}</div>
            <div class="s_price">最低价￥{{discountData.lowest_price}}</div>
          </div>
        </div>
      </div>
    </header>
    <!-- 头部结束 -->
    <!-- 进度条 -->
    <div class="progress_wrapper" v-if="discountData">
      <div class="progress">
        <div class="m_price">￥{{discountData.goods_info.goods_spu_info.price}}</div>
        <van-progress
        :pivot-text="barContent.barText"
        color="#f2826a"
        :percentage="barContent.barPercentage"
        class="progress_content"
        
       />
       <div class="s_price">￥{{discountData.lowest_price}}</div>
      </div>
      <div class="progress_friend">已有{{discountData.bargain_join_list.length}}位好友帮TA砍价了，共砍掉了￥{{discountData.bargain_money}}</div>
      
      <div class="progress_btn" v-if="showSharebtn==true">
        <div class="invite kan" @click="discount">帮TA砍一刀</div>
      </div>
      <div v-else>
        <div class="progress_btn" v-if="discount_already">
          <div class="invite">
            <button open-type="share" class="invite" style="font-size:26rpx;">邀请好友砍价</button>
          </div>
          <div class="buy" @click="buy">立即购买</div>
        </div>
        <div class="progress_btn" v-else>
         <div class="invite kan" @click="discount" >自己先砍一刀</div>
        </div>
       
      </div>
      <div>
        
      </div>
    </div>
    
    <!-- 进度条结束 -->

    <!-- 砍价纪录 -->
    <div class="discountRecord">
        <div class="discountRecord_tit">砍价记录</div>
        <div class="discountRecord_list">
          <div class="discountRecord_list_item" v-for="(item,index) of discountData.bargain_join_list" :key="index">
            <div class="discountRecord_list_item_left">
              <img :src="item.photo_url" alt="" mode="aspectFill">
              <div class="discountRecord_list_item_content">
                <div>{{item.nickname}}</div>
                <div>{{item.updated_at}}</div>
              </div>
            </div>
            <div class="discountRecord_list_item_right">
              帮砍￥{{item.bargain_money}}
            </div>
          </div>
        </div>
    </div>
    <!-- 砍价纪录结束 -->


     <!-- 弹出层 -->
        <div class="mask"  v-if="showModal" @click="hideCart"></div>
        <div class="modalDlg" v-if="showModal&&modalType=='buy'">
          <div class="modalDlg_top">
            <img :src="discountData.goods_info.thumb_url" alt="">
            <div class="modalDlg_top_right">
              <div class="modalDlg_top_right_name">
                <span>{{discountData.goods_info.name}}</span>
              </div>
              <div class="cart_price">
                <span >￥{{discountData.finally_money}}</span>
                <span>库存：{{discountData.goods_info.goods_spu_info.stock}}</span>
              </div>
            </div>
          </div>
          <div class="modalDlo_center">
          
          </div>
          <div class="modalDlo_bottom">  
           <count1 @numberChange="numberChange" :stock="discountData.goods_info.goods_spu_info.stock"><div>购买数量</div></count1>
          </div>
          <div class="join_cart" @click="buying">立即购买</div>
        </div>
        
        <!-- 砍价弹出层 -->
        <div class="discountPop" v-if="showModal && modalType=='discount'">
          <div class="discountPop_top"></div>
          <div class="discountPop_center">
            你一出手就砍掉了￥{{bargain_money}}元
          </div>
          <div class="discountPop_btn">
            <button open-type="share" >邀请好友砍价</button>
          </div>
        </div>
        <!-- 砍价弹出层结束 -->
        <!-- 弹出层结束 -->
  </div>
</template>
<script>
import count1 from '@/components/count'
export default {
  name:'discountDetail',
  data() {
    return {
      discountData:'',
      id:'',
      barContent:'',
      day:'',
      hour:'',
      min:'',
      second:'',
      endDate2: '',
      countTimer:'',//定时器
      countFlag:true,//显示倒数
      showModal: false,//显示弹出层
      modalType:'',//显示砍价还是购买的弹出层
      goodsDetail:'',
      showSharebtn:false,
      shareId:'',//分享id
      discount_already:'',//自己是否已经砍价
      bargain_money:''
    }
  },
  components:{
    count1
  },
  methods: {
    async getDiscountData(){
       const userToken=wx.getStorageSync('userToken')
      if(!userToken){
        this.$currency.showToast('请先授权登陆')
        wx.setStorageSync('toPage',`/pages/discount/discountDetail/main?id=${this.id}`)//保存授权前的地址
        setTimeout(()=>{
          this.$currency.navigateTo('/pages/login/main')
        },1500)
        return
      }
      const res=await this.$request.getData('/activity/getInitiateBargainDetail',{
        user_token:userToken,
        abi_id:this.id
        })
      if(res.data.level=='success'){
        this.discountData=res.data.data
        this.countTime(this.discountData.end_time)
        let obj={};
        obj.barPercentage=100*this.discountData.bargain_money/(this.discountData.goods_info.goods_spu_info.price-this.discountData.lowest_price)
        obj.barText=`￥${this.discountData.bargain_money}`
        this.barContent=obj
        this.shareId=res.data.data.id;

        const arr=res.data.data.bargain_join_list
        const discount_already= arr.find(item=>{
            return item.user_id==res.data.data.user_info.id
          })
        this.discount_already=discount_already;
        if(!discount_already){
          this.modalType='discount'
        }
      }
    },
    countTime(timer) {
      var that = this;
      if(!timer){
        return
      }
    this.countTimer=  setInterval(()=>{
        var date = new Date();
        var now = date.getTime();
        var endDate = new Date(timer);//设置截止时间
        if(isNaN(endDate)){
          // iso不能识别2018-08-30格式时间
          var timer1=timer.replace(/-/g, '/');
          var endDate=new Date(timer1)
        }
        var end = endDate.getTime();
        var leftTime = end - now; //时间差               
        var d, h, m, s, ms;
        if (leftTime >= 0) {
        d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
        h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
        m = Math.floor(leftTime / 1000 / 60 % 60);
        s = Math.floor(leftTime / 1000 % 60);
        // ms = Math.floor(leftTime % 1000);
        // ms = ms < 100 ? "0" + ms : ms
        s = s < 10 ? "0" + s : s
        m = m < 10 ? "0" + m : m
        h = h < 10 ? "0" + h : h

        // this.countdown=d + "：" + h + "：" + m + "：" + s + ":" + ms;
        // console.log(this.countdown)
        this.day=d;
        this.hour=h;
        this.min=m;
        this.second=s
        //递归每秒调用countTime方法，显示动态时间效果
        } else {
        this.countFlag=false
        }
      },1000)
    },
    async discount(){
     const userToken=wx.getStorageSync('userToken')
    const res=await  this.$request.postData('/activity/friendBargain',{
        user_token:userToken,
        abi_id:this.shareId
      })
      if(res.data.level=='success'){
        this.showModal=true;
        this.modalType='discount'
        this.bargain_money=res.data.data.bargain_money
        this.getDiscountData()
      }else{
        this.$currency.showToast(res.data.message)
      }
    },
    showCart() { //显示加入购物车
        this.num=1;//清除规格数量
        this.showModal=true
    },
    buy(){//显示立即购买
      this.num=1;//清除规格数量
      this.showModal=true
      this.modalType='buy'//
    },
    numberChange(num){
        this.num=num
    },
    async buying(){   //点击弹窗的立即购买
      
      if(this.num<=0){
        this.$currency.showToast('购买数量不能为0');
        return
      }
     let res=await this.$request.postData('/order/submitOrder',{
       activity_id:this.discountData.id,
       type:'bargain',
       goods_id:this.discountData.goods_info.id,
       num:this.num,
       goods_spu_id:this.discountData.goods_info.goods_spu_info.id
       })
     if(res.data.level=='success'){
       this.$store.dispatch('setOrder',res.data.data)
       if(this.credit=='credit'){
         this.$currency.navigateTo(`/pages/orderConfirm/main?from=credit`)
       }else{
         this.$currency.navigateTo(`/pages/orderConfirm/main`)
       }
      
     }else{
       this.$currency.showToast(res.data.message)
     }
      
    },
    hideCart() { 
        this.showModal=false
        this.modalType=''
    },
   toHome(){
     wx.switchTab({url:'/pages/home/main'})
   }
  },
   onShareAppMessage(){
     return {
      title: 'F6能量饮微商城',
      desc:'F6功能饮、提神饮、醒酒、解酒能量饮微商城',
      path: `/pages/discount/discountDetail/main?id=${this.id}`
    }
  },
  onLoad(options){
    this.showModal=false;//显示弹出层
    this.modalType=''//显示砍价还是购买的弹出层
    this.discount_already=''
    const msg=wx.getLaunchOptionsSync()
  //  if(msg.scene!=1001){
  //    this.showSharebtn=true
  //  }
   if(msg.scene==1007||msg.scene==1008){//分享出去
     this.showSharebtn=true
   }
   console.log(msg.scene,this.showSharebtn,888)
   
    this.id=options.id
    this.getDiscountData()
  },
  
  onShow(){
   
  },

  
}
</script>
<style lang="scss" scoped>
.discountDetail{
  width: 100%;
  min-height: 100%;
  background: #eee;
}
  header{
    background:#eb544d;
    padding:10px;
    
    .photo{
      color:#fff;
      position: relative;
      padding-top:30px;
      display: flex;
      justify-content: center;
      text-align: center;
      flex-wrap: wrap;
      img{
        width: 60px;
        height: 60px;
        border-radius: 50%;
        margin-bottom: 10px;
      }
      & div{
        width: 100%;
      }
      .home{
        position: absolute;
        top:10px;
        right: 10px;
        width: 30px;
        height: 30px;
        border-radius: 0;
      }
    }
    .goods{
      background: #fff;
      margin-top:10px;
      display: flex;
      justify-content: space-around;
      padding: 10px;
      image{
        width:100px;
        height: 100px;
        margin-right: 10px;
      }
      .goods_right{
        div{
          margin-bottom: 10px;
        }
        .goods_right_tit{
          color:#000;
          font-size: 16px;
          overflow: hidden;
          text-overflow: ellipsis;
          display:-webkit-box; 
          -webkit-box-orient:vertical;
          -webkit-line-clamp:2; 
        }
        .goods_right_price{
          margin-top:20px;
          margin-bottom:0;
          display: flex;
          justify-content: space-between;
          .s_price{
            color:#eb544d;
            margin-left: 5px;
          }
        }
      }
    }
  }

  // 进度条
  .progress_wrapper{
    padding:30px 20px 0 20px;
    background: #fff;
    text-align: center;
    .s_price{
        color:#eb544d
      }
    .progress{   
      display: flex;
      align-items: center;
      .progress_content{
        flex:1;
        margin:0 20px;
      }    
    }
    .progress_friend{
        margin:20px 0;
      }
    .progress_btn{
      display: flex;
      justify-content: space-around;
      padding-bottom: 20px;
      .invite{
        background: #eb544d;
        color:#fff;
        border-radius: 10px;
        width:150px;
        height: 35px;
        line-height: 35px;
      }
      .buy{
        color:#eb544d;
        border-radius: 10px;
        width:150px;
        height: 35px;
        line-height: 35px;
        border:1px solid #eb544d;
      }
      .kan{
        border-radius: 20px;
        width:300px;
      }
    }
  }

  // 砍价记录
  .discountRecord{
    text-align: center;
    .discountRecord_tit{
      padding:10px 0;
      font-size: 16px;
    } 
    .discountRecord_list{
      .discountRecord_list_item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        .discountRecord_list_item_left{
          display: flex;
          text-align: left;
          margin-left: 10px;
          img{
            width:40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
          }
        }
        .discountRecord_list_item_right{
          margin-right: 10px;
        }
      }
    }
  }
  
    /* 弹出框 */
  .mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    z-index: 9000;
    opacity: 0.7;
}
 
.modalDlg{
    width: 100%;
    height:45%;
    position: fixed;
    bottom:0;
    left: 0;
    z-index: 9999;
    background-color: #fff;
}

.modalDlg_top{
  padding:5px;
  padding-right:25px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  
}
.modalDlg_top>img{
  width:80px;
  height: 80px;
}
.modalDlg_top_right{
  margin-left:20px;
  width:200px;
}
.modalDlg_top_right_name{
  display: flex;
  align-items: center
}
.modalDlg_top_right_name_tag{
  color:purple;
  display: inline-block;
  width:50px;
  text-align: center;
  border:1px solid purple;
  font-size: 10px;
  border-radius: 5px;
  margin-right:5px;
}
.modalDlg_top_right_name_tag+span{
  width:200px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
} 
.modalDlo_bottom{
  margin-left:5px;
}
.cart_price{
  margin-top:15px;
  display: flex;
  justify-content: space-between;
  align-items: center
}
.cart_price>span:nth-child(1){
  color:red;
}

.modalDlo_center,.modalDlo_center_tit,.modalDlo_center_classify{
  width:100%;
}
.modalDlo_center_classify{
  display:flex;
  align-items: center;
  flex-wrap:wrap;
  margin:10px 0;
  padding-bottom: 20px;
}
.modalDlo_center_classify>div{
  border:1px solid #eee;
  padding:2.5px 5px;
  border-radius: 5px;
  margin-left:5px;
  text-align: center;
}
.modalDlo_center_tit{
  padding-left:10px;
}
.join_cart{
  width:100%;
  background: rgb(196, 75, 75);
  color:#fff;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  position: absolute;
  bottom:0;
}
button::after {
  border: none;
}
button {
  background-color: #fff;
  line-height: 16px;
  font-size: 10px;
  border-radius:0;
}
.comment_item_pic{
    display:flex;
  }
  .comment_item_pic>img{
    width:80px;
    height: 80px;
    margin-right: 10px;
  }

  /* 规格 */
  .selectClassify{
    border:red 1px solid !important;
    color:red;
  }


  // 砍价弹出层
  .discountPop{
    text-align:center;
    border-radius: 10px;
    width: 80%;
    height:35%;

    position: fixed;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 9999;
    background-color: #fff;
    &_top{
      margin-top:30px;
    }
    &_btn{
      width: 100%;
      position: absolute;
      bottom:30px;
      button{
        background:#eb544d;
        color:#fff;
        width: 150px;
        padding:10px 0;
      }
    }
}
</style>
<style>
  /* .progress .van-progress{
    height: 6px;
  } */
  /* .van-progress__pivot{
    height: 22px !important;
    line-height: 22px !important;
  } */
</style>

